<!--客户列表-->
<style lang="less" scoped>
.m-sech-wrap {
  padding-right:0.2rem;
}
.scroller-wrap {
  top:69px;
}
</style>

<template>
  <div class="contain">
    <div class="listhead-fix">
      <!-- <index-tab :status='2'></index-tab> -->
      <div class="m-sech-wrap displayflex">
        <div class="flex1">
          <router-link :to="{path:'/search',query: { type: 'onlyCustom'}}" class="m-sech-box displayflex">
            <i class="iconfont icon-search"></i>
            <div class="flex1 m-sech-ipt">
              <div class="txt">{{sechTxt || '搜索客户'}}</div>
            </div>
          </router-link>
        </div>
        <!-- <router-link to="/customForm" class="m-sech-classfiy">
          <i class="iconfont icon-add-people"></i>
          <p>新增</p>
        </router-link> -->
      </div>
    </div>
    <scroller lock-x scrollbar-y use-pullup height="-117" v-if="todolist.length>0" ref="Scroller" class='scroller-wrap' :pullup-config="ScrollerConfig" @on-pullup-loading="loadMore">
      <div>
        <div class="list-cwarp">
          <div class="list-cline" v-for="item in todolist">
            <div @click.stop="tolink(item.Guid,item.StaffID)">
              <h2 class="tit ellipsis">{{item.Name}}</h2>
              <p class="tip ellipsis">{{item.Province | province}}{{item.City | city}}{{item.District | district}}{{item.Address}}</p>
              <p class="list-contact">联系人：{{item.LinkMan}} <a @click.stop="call(item.ContactTel)">{{item.ContactTel}} <i class="llse llse-call call"></i></a></p>
              <!-- <div class="tag" v-if="item.OrgRank">{{item.OrgRank | rank}}{{item.OrgGrade | grade}}</div> -->
            </div>
          </div>
        </div>
      </div>
      <div v-if="noMore" class="loader-over">没有更多记录了</div>
    </scroller>
    <div class="noDate_page" v-if="todolist.length <= 0">
      <div class="noDate_icon"><i class="iconfont icon-null"></i></div>
      暂无数据！
    </div>
    <manage-footer :status='3'></manage-footer>
  </div>
</template>

<script>
import manageFooter from '@/components/core/footer/manage.footer.vue';
// import indexTab from '@/components/core/header/index_tab.vue';
export default {
  components: {
    manageFooter
  },
  data() {
    return {
      sechTxt:'',
      todolist: [],
      totalRecords: 0,
      PageIndex: 1,
      PageSize:6,
      noMore:false,
      query: [],
      ScrollerConfig: {
        content: '上拉加载',
        downContent: '上拉加载',
        height: 0,
        loadingContent: '加载中...',
        upContent: '上拉加载',
      }
    }
  },
  computed: {
    userinfo(){
      return localStorage.getItem('userinfo') === null?null:JSON.parse(localStorage.getItem('userinfo'));
    }
  },
  created() {
    this.sechTxt = sessionStorage.sechtxt;
    this.getData(1);
  },
  mounted() {
    this.$nextTick(function() {

    })
  },
  methods: {
    createUser(itemGuid){
      this.$router.push({ path: 'customReguser', query: { Guid: itemGuid } })
    },
    editUser(itemGuid, edit){
      this.$router.push({ path: 'customReguser', query: { Guid: itemGuid, mode: edit} })
    },

    loadMore () {
      this.getData();
    },
    getData() {
      let query = {
          StaffID: this.userinfo.StaffID,
          Name: this.sechTxt || '',
          PageIndex: this.PageIndex,
          PageSize: this.PageSize
        };
      if (sessionStorage.getItem('sechtxt')) {
        sessionStorage.removeItem('sechtxt');
      }
      this.Ajax.post('SearchManagedHospital', query).then((resp) => {
        if (resp.IsSuccess) {
          this.totalRecords = resp.TotalRecords;
          if(resp.Datas.length > 0){
            this.PageSize++;
            this.todolist = this.todolist.concat(resp.Datas);
            this.ScrollControl();
          };
          
        } else {
          self.Toast({
            message: resp.ErrorMessage || '操作异常，请稍后重试',
          });
        };
      });
    },
    tolink(id,StaffID) {
      if(StaffID){
        this.$router.push({ 
          path: 'customDetail', 
          query: { 
            Guid: id,
            StaffID:StaffID
          } 
        })
      }else{
        this.$router.push({ 
          path: 'customDetail', 
          query: { 
            Guid: id
          } 
        })
      }
    },
    call(tel){
       window.location.href=`tel://${tel}`;
    },
    ScrollControl(){
      if(this.totalRecords <= this.PageSize){
        this.ScrollerConfig.content = '';
        this.noMore = true;
        this.$nextTick(() => {
          this.$nextTick(() => {
            this.$refs.Scroller.disablePullup();
          });
        });
      }

      if(this.todolist.length > 0 && this.$refs.Scroller){
        this.$nextTick(() => {
          this.$nextTick(() => {
            this.$refs.Scroller.donePullup();
          });
        });
      }

      if (this.totalRecords == this.todolist.length) {
        this.$nextTick(() => {
          this.$nextTick(() => {
            this.$refs.Scroller.disablePullup();
            this.noMore = true;
          });
        });
      }
    }
  }
}
</script>